<template>
	<view  :style="{ paddingTop: `${menuButtonBoundingClientRect.top -20}px` }">
		<view class="header">
			<image :src="userImg" mode="aspectFill" class="userImg"></image>
			<text>{{ username }}</text>
			<view class="right">
				<image src="@/static/msg.png" @click="information" class="msg"></image>
				<image src="@/static/set.png" class="set" @tap="set"></image>
			</view>
		</view>
		<view class="member" @click="toPage">
			<view class="huiyuan"><image src="@/static/huiyuan.png"></image></view>
			<text style="margin-left: 15rpx;font-size: 34rpx;color: #695E48;">包月会员</text>
			<text style="margin-left: 280rpx;font-size: 24rpx;color: #736A54;">专享9大权益 ></text>
		</view>
		<view class="content">
			<navigator url="/pages/bill/bill">
				<view class="item">
					<image src="@/static/Bill.png"></image>
					<text class="txt2">账单</text>
				</view>
			</navigator>
			<view class="item">
				<image src="@/static/chuzhi.png"></image>
				<text class="txt2">储值</text>
			</view>
			<navigator url="/pages/ticket/ticket">
				<view class="item">
					<text class="txt1">{{ count }}</text>
					<text class="txt2">优惠券</text>
				</view>
			</navigator>
			<navigator url="/pages/integral/integral">
				<view class="item">
					<text class="txt1">136</text>
					<text class="txt2">积分</text>
				</view>
			</navigator>
		</view>
		<view class="content1">
			<view class="row1">
				<text style="font-size: 34rpx;color: #1C222C;font-weight: 600;">我的订单</text>
				<text style="font-size: 28rpx;font-weight: 400;color: #B4B4B4;margin-left: 372rpx;">全部订单</text>
			</view>
			<view class="row2">
				<view class="item1" @click="goToPage(1)">
					<image src="@/static/icon/icon1.png"></image>
					<text>待付款</text>
				</view>
				<view class="item1" @click="goToPage(2)">
					<image src="@/static/icon/icon2.png"></image>
					<text>待发货</text>
				</view>
				<view class="item1" @click="goToPage(3)">
					<image src="@/static/icon/icon3.png"></image>
					<!-- <view class="num">2</view> -->
					<text>待收货/提货</text>
				</view>
				<view class="item1" @click="goToPage(4)">
					<image src="@/static/icon/icon4.png"></image>
					<text>已完成</text>
				</view>
				<view class="item1" @click="goToPage(5)">
					<image src="@/static/icon/icon5.png"></image>
					<text>售后</text>
				</view>
			</view>
		</view>
		<view class="content2">
			<view class="row3">其他</view>
			<view class="row4">
				<view class="item2">
					<image src="/static/icon/icon6.png"></image>
					<text>商品收藏</text>
				</view>
				<navigator url="/pages/collect/collect">
					<view class="item2">
						<image src="/static/icon/icon7.png"></image>
						<text>店铺收藏</text>
					</view>
				</navigator>
				<navigator url="/pages/me/collect/collect">
					<view class="item2">
						<image src="/static/icon/icon8.png"></image>
						<text>视频收藏</text>
					</view>
				</navigator>
				<navigator url="/pages/record/record">
					<view class="item2">
						<image src="/static/icon/icon9.png"></image>
						<text>历史浏览</text>
					</view>
				</navigator>
			</view>
			<view class="row4">
				<navigator url="/pages/address/address">
					<view class="item2" @tap="address">
						<image src="/static/icon/icon10.png"></image>
						<text>收货地址</text>
					</view>
				</navigator>
				<navigator url="/pages/feedback/feedback">
					<view class="item2">
						<image src="/static/icon/icon11.png"></image>
						<text>意见反馈</text>
					</view>
				</navigator>
				<view class="item2" @tap="fenxiao">
					<image src="/static/icon/icon12.png"></image>
					<text>分销挣钱</text>
				</view>
				<view class="item2">
					<image src="/static/icon/icon13.png"></image>
					<text>我的评价</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import { Storage } from '@/static/libs/utils';
export default {
	data() {
		return {
			menuButtonBoundingClientRect: wx.getMenuButtonBoundingClientRect(),
			userImg: '',
			username: '',
			count:'0'
		};
	},
	onLoad() {
		this.userImg = Storage.get('avatarUrl');
		console.log(this.username);
		this.username = Storage.get('nickName');
		this.token = Storage.get('token');
		this.getTicket();
	},
	methods: {
		getTicket() {
					// 领劵中心
					this.$request
						.post(
							`/wxapp.php?i=undefined&t=undefined&v=undefined&from=wxapp&c=entry&a=wxapp&do=index&m=lionfish_comshop&sign=5c5dab0533d7a850a391cbb216fb4bde&controller=user.collect_voucher&token=${
								this.token
							}`
						)
						.then(res => {
							this.tickets = res.data.list;
							// console.log(this.tickets );
							let count = 0;
							this.tickets.forEach(item => {
								if (item.is_use == 0) {
									count++;
								}
							});
							this.count = count;
							console.log(this.count);
						});
				},
		goToPage(index) {
			var i = JSON.stringify(index);
			// console.log(i);
			uni.setStorage({
				key: 'i',
				data: i,
				success: function() {
					// console.log(i);
				}
			});
			uni.switchTab({
				url: '/pages/dingdan/dingdan'
			});
		},
		set() {
			uni.navigateTo({
				url: '/pages/set/set'
			});
		},
		address() {
			uni.navigateTo({
				url: '/pages/Address/Address'
			});
		},
		fenxiao() {
			uni.navigateTo({
				url: '/pages/fenxiao/fenxiao'
			});
		},
		information() {
			uni.navigateTo({
				url: '/pages/information/information'
			});
		},
		toPage() {
			uni.navigateTo({
				url: '/pages/me/member/member'
			});
		}
	}
};
</script>
<style lang="scss">
.header {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-left: 30rpx;
	margin-top: 87rpx;
	.userImg {
		width: 130rpx;
		height: 127rpx;
		border-radius: 50%;
	}
	text {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #1b1b1b;
		margin-left: 20rpx;
	}
	.right {
		margin-right: 30rpx;
		margin-left: auto;
		.msg {
			width: 31rpx;
			height: 33rpx;
		}
		.set {
			width: 33rpx;
			height: 33rpx;
			margin-left: 42rpx;
		}
	}
}
.member {
	width: 690rpx;
	height: 90rpx;
	border-radius: 10rpx;
	margin-top: 40rpx;
	margin-left: 30rpx;
	margin-right: 30rpx;
	background: rgba(247, 229, 187, 0.8);
	display: flex;
	flex-direction: row;
	align-items: center;
	font-family: Source Han Sans CN;
	font-weight: 500;
	.huiyuan {
		width: 65rpx;
		height: 65rpx;
		border-radius: 50%;
		background: #ffffff;
		margin-left: 19rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		image {
			width: 41rpx;
			height: 27rpx;
		}
	}
}
.content {
	width: 690rpx;
	height: 142rpx;
	background: #ffffff;
	box-shadow: 0rpx 5rpx 20rpx 0rpx rgba(6, 0, 1, 0.1);
	border-radius: 20rpx;
	margin: 30rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	.item {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-family: Source Han Sans CN;
		font-weight: 500;
		image {
			width: 40rpx;
			height: 40rpx;
		}
		.txt1 {
			font-size: 34rpx;
			color: #1b1b1b;
		}
		.txt2 {
			font-size: 24rpx;
			color: #666666;
			line-height: 60rpx;
		}
	}
}
.content1 {
	width: 690rpx;
	height: 231rpx;
	background: #ffffff;
	box-shadow: 0rpx 5rpx 20rpx 0rpx rgba(6, 0, 1, 0.1);
	border-radius: 20rpx;
	margin: 30rpx;
	font-family: Source Han Sans CN;
	.row1 {
		margin-left: 30rpx;
		padding-top: 30rpx;
	}
	.row2 {
		margin-top: 47rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		.item1 {
			display: flex;
			flex-direction: column;
			align-items: center;
			image {
				width: 45rpx;
				height: 42rpx;
				position: relative;
			}
			.num {
				width: 26rpx;
				height: 26rpx;
				line-height: 26rpx;
				background: #ff5e5e;
				border-radius: 50%;
				position: absolute;
				text-align: center;
				font-size: 24rpx;
				color: #ffffff;
				right: 44%;
				top: 648rpx;
			}
			text {
				font-size: 26rpx;
				font-weight: 500;
				color: #666666;
			}
		}
	}
}
.content2 {
	width: 690rpx;
	height: 356rpx;
	background: #ffffff;
	box-shadow: 0rpx 5rpx 20rpx 0rpx rgba(6, 0, 1, 0.1);
	border-radius: 20rpx;
	margin: 30rpx;
	.row3 {
		margin-left: 32rpx;
		padding-top: 35rpx;
		font-size: 34rpx;
		font-family: Source Han Sans CN;
		font-weight: 600;
		color: #1c222c;
	}
	.row4 {
		margin-top: 35rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		.item2 {
			display: flex;
			flex-direction: column;
			align-items: center;
			image {
				width: 44rpx;
				height: 42rpx;
			}
			text {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #666666;
				line-height: 60rpx;
			}
		}
	}
}
</style>
